<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!-- <h1>无缝衔接版</h1> -->
    <div class="swiper-wrapper">
        <!-- 轮播图容器 -->
        <div class="wrapper-container">
            <!-- 图片-->
            <div class="banner">
                <ul>
                    <li>
                        <a href="#"><img src="./icon/images/1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./icon/images/2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./icon/images/3.jpg" alt=""></a>
                    </li>
                    <!-- 追加一张图片 -->
                    <li>
                        <a href="#"><img src="./icon/images/4.jpg" alt=""></a>
                    </li>
                </ul>
            </div>
            <!-- 导航点 -->
            <div class="point">
                <ol>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <!-- 按钮 -->
            <div class="btn-left"><span class="icon"></span></div>
            <div class="btn-right"><span class="icon"></span></div>
        </div>
    </div>


    <script src="./js/animateV3.0.0.js"></script>
    <script>
        // 要求:    
        // 功能: 无缝衔接轮播图
        // 1.0 实现图片的自动轮播图
        // 2.0 鼠标移入轮播图区域,停止轮播,鼠标离开轮播图区域,继续轮播
        // 3.0 导航点跟随轮播图进行切换
        // 4.0 点击导航点切换图片
        // 5.0 点击左右按钮,实现图片的切换和导航点跟随切换

        // 思考:
        // 需要控制哪些标签
        // 控制其什么属性

        // 编码:
        // 1.0 获取页面相关的元素 wrapper-containe
        var container = document.querySelector(".wrapper-container");
        var banner = document.querySelector(".banner");
        var ulElement = document.querySelector(".banner ul");
        var points = document.querySelectorAll(".point ol li");
        var btnLeft = document.querySelector(".btn-left");
        var btnRight = document.querySelector(".btn-right");
        // console.log(btnLeft);
        // 2.0 声明变量
        // 记录索引值  
        var index = 0;// 图片的索引值
        var square = 0;// 导航点的索引值
        // 记录宽度
        var width = banner.offsetWidth;
        // 定时器变量
        var dingshiqi  = null;

        // 3.0 编写函数 
        // 切换导航点
        var setPoint = function(key){
            // 排他思想
            for(var i = 0 ; i < points.length ; i ++){
                points[i].className = "";
            }
            // 索引值对应的导航点高亮
            points[key].className = "active";
        }
        // 测试
        // setPoint(0);
        // 改变索引值 (图片和导航点的索引值) 
        // changeIndex === > autoPlay
        var autoPlay = function(){
            // 设置index自增
            index ++;
            // 判断index是否大于
            if(index > 3){
                index = 1;
                // 设置ul标签瞬间位移到0位置
                ulElement.style["marginLeft"] = "0px";
            }
            // 动画执行形式切换图片 animate(dom,prop,value)
            animate(ulElement, "marginLeft", -(index * width));

            // 处理导航点的索引值
            square ++;
            // 三元运算
            square = square > 2 ? 0 : square;
            // 调用setPoint函数
            setPoint(square);
        }
        // 测试
        // autoPlay();

        // 4.0 实现轮播图自动播放
        dingshiqi = setInterval(function(){  autoPlay(); },2000)

        // 5.0 鼠标移入轮播图 暂停轮播图
        container.addEventListener("mouseenter",function(){
                // 暂停播放
                clearInterval(dingshiqi);
                // 立即停止动画
                // clearInterval(ulElement.timer);
        })
        // 5.0 鼠标离开轮播图 暂停轮播图继续执行轮播
        container.addEventListener("mouseleave",function(){
                // 暂停播放
                clearInterval(dingshiqi);
                // 继续执行轮播
                dingshiqi = setInterval(function(){  autoPlay(); },2000)
        })

        // 6.0 点击导航点实现图片切换
        for(var j = 0 ; j < points.length ; j ++){
            // 绑定属性
            points[j].aaa = j;
            // 绑定事件
            points[j].onclick = function(){
                // 记录当前点击的导航点的索引值 
                index = this.aaa ;
                square = this.aaa ;
                // 动画执行形式切换图片 animate(dom,prop,value)
                animate(ulElement, "marginLeft", -(index * width));
                // 设置导航点
                setPoint(square);
            }
        }

        // 7.0 点击左右按钮
        // 左边按钮
        btnLeft.onclick = function(){
            // 防止用户频繁点击按钮
            if(dingshiqi) {
                clearInterval(dingshiqi);
            }
            // 设置索引值自减
            index --;
            // 判断索引值是否小于0 
            if(index < 0){
                // 索引值赋值为 2
                index = 2;
                // 设置ul标签瞬间位移到最后一张图的位置
                ulElement.style["marginLeft"] = "-1350px";
            }
            // 其余图片以动画形式轮播
            animate(ulElement,"marginLeft",-(index * width));
            // 设置导航点的索引值
            square -- ;
            // 三元运算
            square = square < 0 ? 2 : square;
            // 切换导航点背景
            setPoint(square);
        }

        // 右边按钮
        btnRight.onclick = function(){
            // 防止用户频繁点击按钮
            if(dingshiqi){
                clearInterval(dingshiqi);
            }
            // 索引值自增一
            index ++;
            // 判断索引值是否大于 3
            if(index > 3){
                // 给index赋值为1，目的就是为了让第二张图片以动画形式切入
                index = 1;
                // 把容器标签ul瞬间设置为0的为
                ulElement.style["marginLeft"] = "0px";
            }
            // 以动画形式切换图片
            animate(ulElement,"marginLeft",-(index * width));
            // 导航点的索引值
            square ++;
            // 判断
            square = square > 2 ? 0 : square;
            // 设置导航点切换
            setPoint(square);

            // 可以直接用autoPlay函数代替该事件作用域的代码
            // autoPlay()
        }

        // var index = 0;
        // var square = 0;
        // var dingshiqi = null;
        // var width = banner.offsetWidth;

        // var setPoint = function (key) {
        //     for (var i = 0; i < points.length; i++) {
        //         points[i].className = "";
        //     }
        //     points[key].className = "active";
        // }

        // // setPoint(1);
        // var autoplay = function () {
        //     index++;
        //     if (index > 3) {
        //         index = 1;
        //         ulElement.style["marginLeft"] = "0px";
        //     }
        //     animate(ulElement, "marginLeft", -(index * width));
        //     square++;
        //     square = square > 2 ? 0 : square;
        //     setPoint(square);

        // }

        // // autoplay();

        // dingshiqi = setInterval(function () { autoplay(); }, 2000);

        // container.addEventListener("mouseenter", function () {
        //     clearInterval(dingshiqi);
        // })

        // container.addEventListener("mouseleave", function () {
        //     clearInterval(dingshiqi);
        //     dingshiqi = setInterval(function () { autoplay() }, 2000);
        // })

        // var pointClick = function () {
        //     var _this = this;
        //     for (var j = 0; j < points.length; j++) {
        //         points[j].aaa = j;
        //         points[j].onclick = function () {
        //             _this.index = this.aaa ;
        //             _this.square = this.aaa;
        //             animate(ulElement , "marginLeft" , -(index*width));
        //             setPoint(_this.square);
        //         }
        //     }
        // }
        // pointClick();

        // btnLeft.onclick = function () {
        //     if(dingshiqi) {
        //         clearInterval(dingshiqi);
        //     }
        //     index -- ;
        //     if(index < 0) {
        //         index = 2 ; 
        //         ulElement.style["marginLeft"] = "-1350px";
        //     }
        //     animate(ulElement , "marginLeft" , -(index*width));
        //     square -- ;
        //     square = square < 0 ? 2 : square ;
        //     setPoint(square);
        // }

        // btnRight.onclick = function () {
        //     if(dingshiqi) {
        //         clearInterval(dingshiqi);
        //     }
        //     index ++ ;
        //     if(index > 3) {
        //         index = 1 ;
        //         ulElement.style["marginLeft"] = "0px";
        //     }
        //     animate(ulElement , "marginLeft" , -(index*width));
        //     square ++;
        //     square = square > 2? 0 : square ;
        //     setPoint(square); 
        // }

    </script>
</body>

</html>